import React,{ Component,memo } from 'react'
import styles from './Housing1.module.scss'
import Sanjiao from '../../../../../image/sanjiao.png'
import Zujing from '../../../window/Zujing'


class Housing1 extends Component{
    state = {
        show: false
    }

    handleClick = (params) => {
        this.setState({
          show: !this.state.show,
        })
      }

   render(){
    return (
        <div className={styles.Housing}>
             <div className={styles.getHousing}>
                   <div className={styles.area}>
                       <span className={styles.yu}>区域</span>
                       <img src={Sanjiao} className={styles.sanjiao} alt=""/>
                   </div>
                   <div className={styles.shu}></div>
                   <div className={styles.area} onClick={this.handleClick}>
                       <span className={styles.yu}>租金</span>
                       <img src={Sanjiao} className={styles.sanjiao} alt=""/>
                   </div>
                   <div className={styles.shu}></div>
                   <div className={styles.area}>
                       <span className={styles.yu}>排序</span>
                       <img src={Sanjiao} className={styles.sanjiao} alt=""/>
                   </div>
                   <div className={styles.shu}></div>
                   <div className={styles.area}>
                       <span className={styles.yu}>更多</span>
                       <img src={Sanjiao} className={styles.sanjiao} alt=""/>
                   </div>
             </div>
             <Zujing show={this.state.show}></Zujing>
             
        </div>
    )
  }
}

export default memo(Housing1)
